<template>
	<view class="list page bgf6 c00">
		<view class="bgff py12 px20">
			<view class="flex flexC">
				<input class="px10 flex1 bor r40 py5" type="number" placeholder="请输入用户手机号" placeholder-class="cbe"
					v-model="mobile">
				<view class="pl10" @click="showShop">
					<text>{{selectShop.name}}</text>
					<text class="c00 ml5 fs12">▼</text>
				</view>
			</view>
			<view class="flex flexC fs12 mt12">
				<picker mode="date" @change="dateStartChange">
					<text class="c99 w100 px12 py7 bor r40 mr10">{{startTime}}</text>
				</picker>
				<picker mode="date" @change="dateEndChange">
					<text class="c99 w100 px12 py7 bor r40 mr10">{{endTime}}</text>
				</picker>
				<view class="aliR flex1 fs14" @click="searchList">
					<text class="bged px12 py7 r40">查询</text>
				</view>
			</view>
		</view>
		<view class="list">
			<view class="bgff flex flexC flexB aliC rel r7 py20 mt16 mx12 shadow">


				<view class="flex1 borr">
					<view class="bold6 fs20">{{totalAmount}}元</view>
					<view class="c85 mb8">总金额</view>
				</view>
				<view class="flex1 borr">
					<view class="bold6 fs20">{{refundAmount}}元</view>
					<view class="c85 mb8">退款金额</view>
				</view>
			</view>
			<scroll-view scroll-y="true" @scrolltolower="nextPage" style="height: 100vh;">
				<view class="bgff mx12 mt16 py20 px14" v-for="item in list" @click="clickItem(item)">
					<view class="mb6">手机号：{{item.user.mobile}}
						<text class="bgff0 ml20 r40  py2 fs10 px10" v-if="item.status =='unuse'">未核销</text>
					</view>
					<view class="flex flexC mb6">
						<text class="flex1">{{item.coupon.sku_name}}</text>

						<text class="flex1 ml20">抵扣:{{item.coupon.hour}}小时</text>
					</view>
					<view><text class="flex1">兑换码:{{item.dou_code}}</text></view>
					<view>购买时间：{{item.create_time_text}}</view>
				</view>
			</scroll-view>

		</view>

		<uni-popup ref="pop" type="bottom">
			<view class="popup-content2">
				<button class="popup-btn button" @click="copy">复制券码</button>

				<view class="popup-btn" @click="$refs.pop.close()">取消</view>
			</view>

		</uni-popup>


		<!-- 店铺选择 -->
		<uni-popup ref="shopPicker" type="bottom">
			<shop-list @search="search" :list="shopList" @onSelectShop="onSelectShop" @close="onClose"></shop-list>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shopList: [],
				selectShop: null,
				page: 1,
				list: [],
				isLastPage: false,
				isnodata: false,
				totalAmount: 0,
				refundAmount: 0,
				mobile: '',
				startTime: '开始时间',
				endTime: '结束时间',
				unAmount: 0,
				currentItem: null

			};
		},
		onLoad(option) {

			var select = option.selectShop;

			if (select != null) {
				this.selectShop = JSON.parse(select);
				this.getList();
			} else {

			}
			this.getShopList();

		},
		methods: {

			copy() {
				this.$refs.pop.close();
				uni.setClipboardData({
					data: this.currentItem.dou_code,
					success: () => { //复制成功的回调函数
						uni.showToast({ //提示
							title: '复制成功',
							icon: 'success'
						})
					}
				})

			},

			clickItem(item) {
				this.currentItem = item;
				this.$refs.pop.open();
			},

			dateStartChange(e) {
				this.startTime = e.detail.value;
				console.info(e);
			},
			dateEndChange(e) {
				this.endTime = e.detail.value;
			},


			searchList() {
				console.info('==mobile===' + this.mobile)
				this.page = 1;
				this.list = [];
				this.isnodata = false;
				this.isLastPage = false;
				this.getList();
			},

			nextPage() {
				if (this.isLastPage) return;
				this.page += 1;
				this.getList();
			},

			getList() {

				var start = this.startTime;
				if (this.startTime == '开始时间') {
					start = "";
				}
				var end = this.endTime;

				if (this.endTime == '结束时间') {
					end = "";
				}

				let param = {
					page: this.page,
					shop_id: this.selectShop.id,
					status: this.status,
					mobile: this.mobile,
					startTime: this.start,
					endTime: this.end
				};
				let that = this;
				this.$api.douCouponBuyList(param).then(res => {
					if (res.code == 1) {
						let length = res.data.list.length;
						that.totalAmount = res.data.total;
						that.refundAmount = res.data.refund;
						for (let i = 0; i < length; i++) {
							that.list.push(res.data.list[i]);
						}
						if (length < 10) {
							this.isLastPage = true;
						}
						if (that.list.length > 0) {
							that.isnodata = false;
						} else {
							that.isnodata = true;
						}
					} else {

					}
				})
			},

			onClose() {
				this.$refs.shopPicker.close();
			},
			getShopList() {
				let param = {
					keyword: this.keyword
				};
				let that = this;
				this.$api.getShopList(param).then(res => {

					console.info(JSON.stringify(res));
					if (res.code == 1) {
						that.shopList = res.data;
						if (that.shopList.length > 0) {
							if (that.selectShop == null) {
								that.selectShop = that.shopList[0];
								that.getList();
							}

						}
					} else {

					}
				})
			},

			showShop() {
				this.$refs.shopPicker.open();

			},
			search(value) {

				this.keyword = value;
				this.getShopList();
			},

			onSelectShop(item) {
				this.selectShop = item;
				this.$refs.shopPicker.close();
				this.page = 1;
				this.list = [];
				this.isnodata = false;
				this.isLastPage = false;
				this.getList();
			},
		}
	}
</script>

<style lang="scss">
	.w100 {
		width: 160rpx;
	}

	.popup-content2 {
		background: #FFFFFF;

		.popup-btn {
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			border-bottom: 1px solid #f5f5f5;
			background: #FFFFFF;
		}

		.button {
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			border-bottom: 1px solid #f5f5f5;
			background: #FFFFFF;
			font-size: 11pt;
		}

		button::after {
			border: none;
		}

		.pt20 {
			border-bottom: 20rpx solid #f5f5f5;
		}
	}
</style>